<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=yes,email=no,date=no,address=no">
    <link rel="stylesheet" type="text/css" href="../../common/style/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../common/lib/swiper/swiper-4.0.5.min.css">
    <link rel='stylesheet prefetch' href="../../common/style/photoswipe.css">
    <link rel='stylesheet prefetch' href="../../common/style/default-skin.css">
    <link rel="stylesheet" type="text/css" href="../../common/style/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="../../common/style/house.css" />
    <link rel="stylesheet" type="text/css" href="../../common/style/union.css" />
    <script src="../../common/lib/jquery-1.11.2.min.js"></script>
    <script
      type="text/javascript"
      src="http://api.map.baidu.com/api?v=2.0&ak=g8xdMTBgaM9oOiVFU0mWgpuyWG5xudfZ"
    ></script>
    <script type="text/javascript" src="../../common/js/md5.js"></script>
    <script src="../../common/js/vue.min.js"></script>
    <script src="../../common/js/axios.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="//res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
    <script type="text/javascript" charset="utf-8" src="../../common/js/weixin.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="../../common/js/share.js"></script>
    <script
      type="text/javascript"
      src="../../common/request/request.js?version=1.0.12"
    ></script>
    <script type="text/javascript" src="./js/community.js?version=1.0.12"></script>
    <script type="text/javascript" src="../../common/js/aui-dialog.js"></script>
    <style>
        .pingjia .mui-comments:last-child .mui-content {
            padding-bottom: .5rem;
        }

        .union-top-four .header-nav li {
            width: 49%;
        }
        .union-more-house .more-house-list .remark .line-1 {
            width: 100%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .aui-dialog-body{
            font-size:0.95em;
            color: #333;
        }
        .aui-dialog-btn{
            font-size: 0.95em;
        }
    </style>
</head>

<body class="layout-w">
    <div class="aui-content-padded" id="community">
        <div class="union-top-four" id="nav-container">
            <ul class="cell header-nav" id="nav-box">
                <li data-type="nav" data-index="0" class="active"><a href="javascript:;">在租</a></li>
                <li class="split"></li>
                <!-- <li data-type="nav" data-index="1"><a href="javascript:;">+服务</a></li> -->
                <!-- <li class="split"></li> -->
                <!-- <li data-type="nav" data-index="2"><a href="javascript:;">评价</a></li>
                <li class="split"></li> -->
                <li data-type="nav" data-index="3"><a href="javascript:;">详情</a></li>
            </ul>
        </div>

        <div id="container" style="margin-top:2.6rem;">
            <div class="first-child" id="first-child">
                <div class="top-search aui-clearfix">
                    <div class="aui-pull-left">
                        <img src="../../common/images/logo-2.svg" @click="goHome">
                    </div>
                    <div class="aui-pull-right more-info">
                        <a href="javascript:;" style="padding-left:.5rem;" onClick="showMenus()">
                            <img src="../../common/images/more.svg" style="vertical-align: middle;width:.9rem;">
                        </a>
                        <ul style="display: none;">
                            <li><a href="/home/html/">首页</a></li>
                            <li><a href="../search/search-result-community.html">搜索选址</a></li>
                            <li><a href="../commiss/demand-entry.html">委托找房</a></li>
                            <li><a href="../others/enterDevelopers.html">入驻平台</a></li>
                        </ul>
                    </div>
                    <div class="aui-pull-right" style="width:50%;">
                        <!-- <form @submit.native.prevent> -->
                            <div class="header-cearch">
                                <i class="fa fa-search"  @click="goToEntry"></i>
                                <input class="header-search-input" type="text" v-model="communitykeywords" placeholder="搜索联合办公社区" @focus="goToEntry">
                            </div>
                        <!-- </form> -->
                    </div>
                </div>
                <div class="three-d mt-25">
                    <!-- 这里放图片 -->
                    <div class="picture" id="picture">
                        <div class="swiper-container swiper-threed" alt="Image description">
                            <div class="my-gallery swiper-wrapper" v-if="communityBaseInfoList.imgList.length>0">
                                <div class="swiper-slide"  v-for="item in communityBaseInfoList.imgList" >
                                    <a :href="item?item:'../../common/images/noupload.png'" data-size="1024x1024"><img  :src="item?item:'../../common/images/noupload.png'"/></a>
                                    <figcaption itemprop="caption description">图片1</figcaption>
                                </div>
                            </div>
                            <div class="my-gallery swiper-wrapper" v-else>
                                <div class="swiper-slide" >
                                    <a href="../../common/images/noupload.png" data-size="1024x1024"><img  src="../../common/images/noupload.png"/></a>
                                    <figcaption itemprop="caption description">图片1</figcaption>
                                </div>
                            </div>
                            <div class="swiper-pagination"></div>
                        </div>
                        <img src="../../common/images/logo-lighter.png" class="watermark">
                    </div>
                    <!-- 这里放图片 -->
                </div>
                <div class="main-info">
                    <div class="aui-info">
                        <div class="aui-info-item">
                            <h2 class="title">{{communityBaseInfoList.brandName}}·{{communityBaseInfoList.communityName}}</h2>
                        </div>
                        <!-- <div class="aui-info-item"><span class="blue">2800</span>&nbsp;<small>元·人/月起</small></div> -->
                    </div>
                    <div class="aui-info">
                        <div class="aui-info-item"><span class="blue">{{communityBaseInfoList.minPrice}}</span>&nbsp;<small>元·人/月起</small></div>
                    </div>
                    <div class="aui-info" style="padding-top:.2rem;">
                        <div class="aui-info-item"><small>{{communityBaseInfoList.address}}｜{{communityBaseInfoList.town}}·{{communityBaseInfoList.tradingArea}}</small></div>
                    </div>
                    <div class="aui-info">
                        <div class="aui-info-item"><small>{{attentionTypeNum}}人关注</small></div>
                        <div class="aui-info-item"><small>浏览量<span>{{countVisitNum}}</span>次</small></div>
                    </div>
                    <div class="black-bg"></div>
                </div>
                <div class="new-location aui-margin-t-10" style="margin-bottom:0;">
                    <div class="line-1">
                        <img src="../../common/images/union/icon-location.svg">{{communityBaseInfoList.address}}
                    </div>
                </div>
                <div class="union-choose" style="border-bottom:none;">
                    <span class="title">社区规格:</span>
                    <div class="desc-list">
                        <span><img src="../../common/images/union/icon-1.svg">{{communityBaseInfoList.spaceNum}} 办公位置</span>
                        <span><img src="../../common/images/union/icon-2.svg">{{communityBaseInfoList.officeNum}} 办公间</span>
                        <span><img src="../../common/images/union/icon-3.svg">{{communityBaseInfoList.meetingNum}} 会议室</span>
                        <span><img src="../../common/images/union/icon-4.svg">{{communityBaseInfoList.comHouseNum}} 路演场地</span>
                    </div>
                </div>
                <div class="union-choose" style="margin-top: -.5rem;">
                    <span class="title">可否注册:</span>
                    <div class="desc-list">
                        <span v-if="communityBaseInfoList.registerFlag == 1"><img src="../../common/images/union/icon-6.svg">可以注册</span>
                        <span v-if="communityBaseInfoList.registerFlag == 0"><img src="../../common/images/union/icon-5.svg">不可注册</span>
                    </div>
                </div>
                <div class="union-choose inline" style="border-bottom:none;">
                    <span class="title">租金支付:</span>
                    <div class="desc-list">
                        <span style="width:100%;">{{communityBaseInfoList.paymentType}}</span>
                    </div>
                </div>
                <div class="union-choose inline" style="border-bottom:none;">
                    <span class="title">最短租期:</span>
                    <div class="desc-list">
                        <span style="width:100%;">{{communityBaseInfoList.minTenancy}}</span>
                    </div>
                </div>
                <div class="union-style member" style="position:relative;" v-if="communityHouse.houseSpace.length>0">
                    <h3 class="common-title-h3 mt-1">开放办公位</h3>
                    <!-- <span class="right">2018年12月1日更新</span> -->
                    <div class="swiper-container fujia" id="bgw">
                        <div class="swiper-wrapper">
                                <div class="swiper-slide"  v-for="item in communityHouse.houseSpace"  >
                                        <div class="details">
                                            <div class="pic">
                                                <img :src="item.imgUrl?item.imgUrl:'../../common/images/noupload.png'" style="display: inline;">
                                                <p style="font-weight:bold"><img src="../../common/images/union/icon-location.svg"><span  v-html='item.address'></span></p>
                                            </div>
                                            <div class="remark aui-clearfix">
                                                <div class="line-1">
                                                    <span class="communityName">开放办公位</span>
                                                    <span class="office-type " :class="[item.type == 1?'red':'blue']">
                                                        <small>{{item.type == 1?'固定':'移动'}}</small>
                                                    </span>
                                                </div>
                                                <div class="aui-clearfix detail-info">
                                                    <div class="pull-left"><big v-html='item.price'></big><small>元·人/月起</small></div>
                                                    <div class="pull-right sold-out" v-if="item.stock>5">
                                                        <small  >余{{item.stock}}/总{{item.totalNum}}</small>
                                                    </div>
                                                    <div class="pull-right sold-out" v-if="item.stock == 0">
                                                        <small >售罄</small>
                                                    </div>
                                                    <div class="pull-right warning" v-if="item.stock<=5 && item.stock!=0" style="color:#FF6F6F;">
                                                            <small >余量紧张</small>
                                                    </div>    
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                        </div>
                    </div>
                </div>
                <div class="union-style member" style="position:relative;" v-if="communityHouse.houseOffice.length>0">
                    <h3 class="common-title-h3 mt-1">专属办公间
                        <!-- <small class="tips">(8个办公间在租)</small> -->
                    </h3>
                    <div class="swiper-container fujia" id="bgj">
                        <div class="swiper-wrapper">
                                <div class="swiper-slide" v-for="item in communityHouse.houseOffice" >
                                        <div class="details">
                                            <div class="pic">
                                                <img :src="item.imgUrl?item.imgUrl:'../../common/images/noupload.png'" style="display: inline;">
                                                <p style="font-weight:bold"><img src="../../common/images/union/icon-location.svg"><span ></span></p>
                                            </div>
                                            <div class="remark aui-clearfix">
                                                <div class="line-1">
                                                    <span class="communityName" >专属办公间</span>
                                                    <span class="office-type blue"><small>{{item.capacity}}人间</small></span>
                                                </div>
                                                <div class="aui-clearfix detail-info">
                                                    <div class="pull-left"><big>{{item.price}}</big><small> 万元/月</small></div>
                                                    <div class="pull-right sold-out"><small>余{{item.num}}/总{{item.totalNum}}</small></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                        </div>
                    </div>
                </div>
                <div class="union-style member" style="position:relative;" v-if="communityHouse.houseRoad.length>0">
                    <h3 class="common-title-h3 mt-1">路演场地</h3>
                    <div class="swiper-container fujia" id="ly">
                        <div class="swiper-wrapper">
                                <div class="swiper-slide" v-for="item in communityHouse.houseRoad"  >
                                        <div class="details">
                                            <div class="pic">
                                                <img :src="item.url?item.url:'../../common/images/noupload.png'" style="display: inline;">
                                                <p style="font-weight:bold"><img src="../../common/images/union/icon-location.svg"><span ></span></p>
                                            </div>
                                            <div class="remark aui-clearfix">
                                                <div class="line-1">
                                                    <span class="communityName" >路演场地</span>
                                                    <span  class="office-type blue"><small>{{item.area}}m²</small></span></div>
                                                <div class="aui-clearfix detail-info">
                                                    <div class="pull-left"><big>{{item.price}}</big><small> 元/月</small></div>
                                                    <div class="pull-right sold-out"><small>{{item.capacity}}人</small></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="fourth-child" id="forth-child">
                <div class="union-detail">
                    <h3 class="common-title-h3 mt-1">社区详情</h3>
                    <div class="dis aui-ellipsis-2" id="xiangqing" v-html="communityBaseInfoList.communityDetail">
                        
                    </div>
                    <p class="hot-brand-more">
                        <i class="fa fa-angle-down"></i>
                    </p>
                </div>
                <div class="union-service aui-margin-t-10">
                    <h3 class="common-title-h3 mt-1">服务设施</h3>
                    <div v-for="item in communityPicList">
                        <img
                          v-if="item.type==3"
                          :src="item.imgUrl?item.imgUrl:'../../common/images/noupload.png'"
                          style="width: 95%;display: block;margin: .8rem auto;"
                        />
                    </div>      
                </div>
                <div class="around" style="margin-bottom:0;">
                    <h3 class="common-title-h3 mt-1">社区位置</h3>
                    <div class="map" style="background:#eee;" id="community-map"></div>
                </div>
                <div class="union-brand aui-margin-t-10" style="position:relative;">
                    <h3 class="common-title-h3 mt-1 aui-list-item-arrow" @click="goToBrand">关于品牌</h3>
                    <div class="dis"  v-html="communityBaseInfoList.brandIntroduce" >
                        
                    </div>
                </div>
                <div class="union-more-house aui-margin-t-10" v-if="communityList.length>0">
                    <h3 class="common-title-h3 mt-1">更多社区</h3>
                    <div class="out" v-for="item in communityList" @click="goCommunity(item.communityId)">
                        <div class="more-house-list">
                            <div class="pic">
                                <img  :src="item.imgUrl?item.imgUrl:'../../common/images/noupload.png'"
                                style="display: inline;">
                                <p><small>{{item.address}}|{{item.townName}}·{{item.tradingArea}}</small></p>
                            </div>
                            <div class="remark aui-clearfix">
                                <div class="line-1">{{item.communityName}}·{{item.brandName}}</div>
                                <div class="aui-clearfix detail-info">
                                    <div class="pull-left"><big>{{item.price}}</big><small>元·人/月起</small></div>
                                </div>
                                <div class="aui-clearfix detail-info">
                                    <div style="padding-top:.35rem;padding-bottom:.35rem;"><small>浏览量</small>{{ moreBrowseNum[$index].count }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="dibu-qrcode">
            <div class="bottom-line">
                <h5>关注公众号，选址更方便</h5>
                <div class="bg-line"></div>
            </div>
            <img src="../../common/images/qrcode.svg">
        </div>
        <!-- 底部 -->
        <footer>
            <img src="../../common/images/union/footer.svg" style="width:70%;">
        </footer>
        <!-- 底部 -->
    
    <!-- 大图 -->
    <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="pswp__bg"></div>
        <div class="pswp__scroll-wrap">
            <div class="pswp__container">
                <div class="pswp__item"></div>
                <div class="pswp__item"></div>
                <div class="pswp__item"></div>
            </div>
            <div class="pswp__ui pswp__ui--hidden">
                <div class="pswp__top-bar">
                    <div class="pswp__counter"></div>
                    <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
                    <div class="pswp__preloader">
                        <div class="pswp__preloader__icn">
                            <div class="pswp__preloader__cut">
                                <div class="pswp__preloader__donut"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="pswp__caption">
                    <div class="pswp__caption__center"></div>
                </div>
            </div>
        </div>
    </div>
    <!-- 大图 -->
    <div class="white-4"></div>
    <a class="back-to-top" href="javascript:;" style="bottom:2.8rem;">
        <img src="../../common/images/totop.svg">
    </a>
    <div class="bottom-fixed">
        <div class="line-2 aui-clearfix">
            <a class="aui-pull-left" :href="
            'http://api.map.baidu.com/direction?origin=latlng:'+communityBaseInfoList.latitude+','+communityBaseInfoList.longitude+'|name:我的位置&destination='+communityBaseInfoList.address+'&mode=driving&region=北京&output=html&src=webapp.baidu.openAPIdemo'";>
            <img src="../../common/images/location-address.svg">导 航</a>
            <a class="aui-pull-left" :href="'tel:'+communityPhone"><img src="../../common/images/location-phone.svg" >电 话</a>
            <a class="aui-pull-left" href="javascript:;" v-if="isAttentionNum==0"  @click="addAttention">
                <img src="../../common/images/favorite.svg" style="width:.65rem;">关 注
            </a>
            <a class="aui-pull-left down-fav" href="javascript:;" v-if="isAttentionNum"><img src="../../common/images/favorite.svg"
                    style="width:.65rem;">已关注</a>
        </div>
    </div>
</div>
    <script src="../../common/lib/swiper/swiper-4.0.5.min.js"></script>
    <script>
        $(document).ready(function () {
            setTimeout(function(){
                var mySwiper = new Swiper('.swiper-threed', {
                    observer:true,
                    autoplay: true,
                    direction: 'horizontal',
                    pagination: {
                        el: '.swiper-pagination',
                        type: 'custom',
                        renderCustom: function (swiper, current, total) {
                            return current + ' / ' + total;
                        }
                    },
                })

                var swiper = new Swiper('.swiper-lou', { observer:true,slidesPerView: 2, loop: true });

                //开放办公位
                var swiperBGW = new Swiper('#bgw', { observer:true,slidesPerView: 'auto', loop: false, direction: 'horizontal' });
                var swiperBGJ = new Swiper('#bgj', { observer:true,slidesPerView: 'auto', loop: false, direction: 'horizontal' });
                var swiperLY = new Swiper('#ly', { observer:true,slidesPerView: 'auto', loop: false, direction: 'horizontal' });
            },500)

            //回到顶部
            window.onscroll = function () {
                var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
                if (scrollTop >= 100) {
                    $('.back-to-top').fadeIn();
                } else {
                    $('.back-to-top').fadeOut();
                }
            }
            $('.back-to-top').click(function () { $('html,body').animate({ scrollTop: '0px' }, 500); });

            //滚动到指定位置
            $('li[data-index="0"]').click(function () { $('html,body').animate({ scrollTop: $('.first-child').offset().top }, 500); });
            $('li[data-index="1"]').click(function () { $('html,body').animate({ scrollTop: $('.second-child').offset().top - 40 }, 500); });
            // $('li[data-index="2"]').click(function () { $('html,body').animate({ scrollTop: $('.third-child').offset().top - 40 }, 500); });
            $('li[data-index="3"]').click(function () { $('html,body').animate({ scrollTop: $('.fourth-child').offset().top - 40 }, 500); });
        })
    </script>
    <script src='../../common/lib/big_img.js'></script>
    <script src='../../common/lib/photoswipe.min.js'></script>
    <script src='../../common/lib/photoswipe-ui-default.min.js'></script>
    <script src='../../common/lib/bigImg.js'></script>
    <script>
        var navContainer = document.getElementById("nav-container");
        var navBox = document.getElementById("nav-box");
        var text = document.getElementById("container");
        var navBoxChild = new Array();

        for (i = 0; i < navBox.children.length; i++) {
            if (i % 2 == 0) {
                navBoxChild.push(navBox.children[i]);
            }
        }

        var textChild = text.children;
        var a = navContainer.offsetHeight;
        $(document).ready(function () {
            window.onscroll = function () {
                var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
                if (scrollTop >= 20) {
                    $('.top-four').fadeIn();
                } else {
                    $('.top-four').fadeOut();
                }

                var scrollHeight = $(document).height(); //整个文档的高度
                var windowHeight = $(this).height(); //当前可见区域的大小

                //当导航与相应文档接触的时候自动切换
                for (var i = 0; i < navBoxChild.length; i++) {
                    if (scrollTop + (a * 2) >= textChild[i].offsetTop - 50) {
                        for (var j = 0; j < navBoxChild.length; j++) {
                            navBoxChild[j].className = "";
                        }

                        if (scrollTop + windowHeight == scrollHeight) {
                            //滑动到底部
                            navBoxChild[navBoxChild.length - 1].className = "active";
                        } else {
                            navBoxChild[i].className = "active";
                        }
                    }
                }
            };           
        });
    </script>
    <script type="text/javascript" src="../../common/lib/jquery.raty.min.js"></script>
    <script type="text/javascript">
        $('#score-demo').raty({ score: 3.5 });
        $('#score-demo1').raty({ score: 3 });

        //更多
        $('.hot-brand-more').on('click', function () {
            var name = document.getElementById('xiangqing').className;

            if (name.indexOf('aui-ellipsis-2') > -1) {
                $('#xiangqing').removeClass('aui-ellipsis-2');
                $(this).html('<i class="fa fa-angle-up"></i>');
            } else {
                $('#xiangqing').addClass('aui-ellipsis-2');
                $(this).html('<i class="fa fa-angle-down"></i>');
            }
        })
        function showMenus(){
            $('.more-info ul').toggle();
        }
        $(document).click(function(e) { //点击空白处关闭弹窗
            var  pop = $('.more-info');  
            if(!pop.is(e.target) && pop.has(e.target).length === 0) { 
                $('.more-info ul').hide();
            }  
        });
    </script>
</body>

</html>